<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="utf-8">
    <title>Time Picker Input - Bootstrap Form Helpers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Extend Bootstrap's components with time picker inputs.">
    <meta name="keywords" content="jquery,jquery plugins,twitter bootstrap,bootstrap form,bootstrap form helpers,timepicker,timepicker input,time picker">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="assets/css/bootstrap-formhelpers.css" rel="stylesheet">
    <link href="assets/css/bootstrap-formhelpers-countries.flags.css" rel="stylesheet">
    <link href="assets/css/bootstrap-formhelpers-currencies.flags.css" rel="stylesheet">
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">

  </head>

  <body data-spy="scroll" data-target=".bs-docs-sidebar">

    <!-- Navbar
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="./index.html">Bootstrap Form Helpers</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active">
                <a href="./index.html">Home</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  <!-- Subhead
  ================================================== -->
  <div class="jumbotron masthead">
    <div class="container">
      <h1>Bootstrap Form Helpers</h1>
      <p class="lead">Extend Bootstrap's components—now with 12 custom jQuery plugins.</p>
      <p><a href="https://github.com/vlamanna/BootstrapFormHelpers/zipball/master" class="btn btn-primary btn-large">Download Bootstrap Form Helpers</a></p>
      <ul class="masthead-links">
        <li><a href="http://github.com/vlamanna/BootstrapFormHelpers">GitHub project</a></li>
        <li>Version 1.8.2</li>
      </ul>
    </div>
  </div>

  <div class="bs-docs-social">
    <div class="container">
      <ul class="bs-docs-social-buttons">
        <li>
          <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=vlamanna&amp;repo=BootstrapFormHelpers&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" style="width: 100px; height: 20px;"></iframe>
        </li>
        <li>
          <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=vlamanna&amp;repo=BootstrapFormHelpers&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" style="width: 98px; height: 20px;"></iframe>
        </li>
        <li class="follow-btn">
          <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1347008535.html#_=1350836523114&amp;id=twitter-widget-1&amp;lang=en&amp;screen_name=vincentlamanna&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 236px; height: 20px; " title="Twitter Follow Button" data-twttr-rendered="true"></iframe>
        </li>
        <li class="tweet-btn">
          <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.1347008535.html#_=1350836523111&amp;count=horizontal&amp;id=twitter-widget-0&amp;lang=en&amp;size=m&amp;text=Bootstrap%20Form%20Helpers&amp;url=http%3A%2F%2Fvlamanna.github.com%2FBootstrapFormHelpers%2F&amp;via=vincentlamanna" class="twitter-share-button twitter-count-horizontal" style="width: 107px; height: 20px; " title="Twitter Tweet Button" data-twttr-rendered="true"></iframe>
        </li>
      </ul>
    </div>
  </div>

  <div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav affix-top" data-spy="affix" data-offset-top="502" data-offset-bottom="250">
          <li><a href="index.html"><i class="icon-chevron-right"></i> Overview</a></li>
          <li><a href="select.html"><i class="icon-chevron-right"></i> Select Box</a></li>
          <li><a href="country.html"><i class="icon-chevron-right"></i> Countries</a></li>
          <li><a href="state.html"><i class="icon-chevron-right"></i> States</a></li>
          <li><a href="currency.html"><i class="icon-chevron-right"></i> Currencies</a></li>
          <li><a href="phone.html"><i class="icon-chevron-right"></i> Phone</a></li>
          <li><a href="language.html"><i class="icon-chevron-right"></i> Languages</a></li>
          <li><a href="timezone.html"><i class="icon-chevron-right"></i> Timezones</a></li>
          <li><a href="googlefont.html"><i class="icon-chevron-right"></i> Google Fonts</a></li>
          <li><a href="datepicker.html"><i class="icon-chevron-right"></i> Date Picker</a></li>
          <li><a href="timepicker.html"><i class="icon-chevron-right"></i> Time Picker</a></li>
          <li><a href="font.html"><i class="icon-chevron-right"></i> Fonts</a></li>
          <li><a href="fontsize.html"><i class="icon-chevron-right"></i> Font Sizes</a></li>
        </ul>
      </div>
      <div class="span9">

        <!-- Time Picker
        ================================================== -->
        <section id="timepicker">
          <div class="page-header">
            <h1>Time Picker <small>bootstrap-formhelpers-timepicker.js</small></h1>
          </div>
          
          <h3>About Time Picker</h3>
          <p>For adding a time picker, include bootstrap-formhelpers-timepicker.js once alongside the other JS files.</p>
          <h3>Use cases</h3>

          <p>Simplest example.</p>
          <form class="bs-docs-example form-inline">
            <div class="bfh-timepicker">
              <div class="input-prepend bfh-timepicker-toggle" data-toggle="bfh-timepicker">
                <span class="add-on"><i class="icon-time"></i></span>
                <input type="text" class="input-medium" readonly>
              </div>
              <div class="bfh-timepicker-popover">
                <table class="table">
                  <tbody>
                    <tr>
                      <td class="hour">
                        <a class="next" href="#"><i class="icon-chevron-up"></i></a><br>
                        <input type="text" class="input-mini" readonly><br>
                        <a class="previous" href="#"><i class="icon-chevron-down"></i></a>
                      </td>
                      <td class="separator">:</td>
                      <td class="minute">
                        <a class="next" href="#"><i class="icon-chevron-up"></i></a><br>
                        <input type="text" class="input-mini" readonly><br>
                        <a class="previous" href="#"><i class="icon-chevron-down"></i></a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </form>
          <pre class="prettyprint">&lt;div class="bfh-timepicker"&gt;
  &lt;div class="input-prepend bfh-timepicker-toggle" data-toggle="bfh-timepicker"&gt;
    &lt;span class="add-on"&gt;&lt;i class="icon-time"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;input type="text" class="input-medium" readonly&gt;
  &lt;/div&gt;
  &lt;div class="bfh-timepicker-popover"&gt;
    &lt;table class="table"&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td class="hour"&gt;
            &lt;a class="next" href="#"&gt;&lt;i class="icon-chevron-up"&gt;&lt;/i&gt;&lt;/a&gt;&lt;br&gt;
            &lt;input type="text" class="input-mini" readonly&gt;&lt;br&gt;
            &lt;a class="previous" href="#"&gt;&lt;i class="icon-chevron-down"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/td&gt;
          &lt;td class="separator"&gt;:&lt;/td&gt;
          &lt;td class="minute"&gt;
            &lt;a class="next" href="#"&gt;&lt;i class="icon-chevron-up"&gt;&lt;/i&gt;&lt;/a&gt;&lt;br&gt;
            &lt;input type="text" class="input-mini" readonly&gt;&lt;br&gt;
            &lt;a class="previous" href="#"&gt;&lt;i class="icon-chevron-down"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

          <p>Example showing how to set a default time.</p>
          <form class="bs-docs-example form-inline">
            <div class="bfh-timepicker" data-time="08:00">
              <div class="input-prepend bfh-timepicker-toggle" data-toggle="bfh-timepicker">
                <span class="add-on"><i class="icon-time"></i></span>
                <input type="text" class="input-medium" readonly>
              </div>
              <div class="bfh-timepicker-popover">
                <table class="table">
                  <tbody>
                    <tr>
                      <td class="hour">
                        <a class="next" href="#"><i class="icon-chevron-up"></i></a><br>
                        <input type="text" class="input-mini" readonly><br>
                        <a class="previous" href="#"><i class="icon-chevron-down"></i></a>
                      </td>
                      <td class="separator">:</td>
                      <td class="minute">
                        <a class="next" href="#"><i class="icon-chevron-up"></i></a><br>
                        <input type="text" class="input-mini" readonly><br>
                        <a class="previous" href="#"><i class="icon-chevron-down"></i></a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </form>
          <pre class="prettyprint">&lt;div class="bfh-timepicker" data-time="08:00"&gt;
  &lt;div class="input-prepend bfh-timepicker-toggle" data-toggle="bfh-timepicker"&gt;
    &lt;span class="add-on"&gt;&lt;i class="icon-time"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;input type="text" class="input-medium" readonly&gt;
  &lt;/div&gt;
  &lt;div class="bfh-timepicker-popover"&gt;
    &lt;table class="table"&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td class="hour"&gt;
            &lt;a class="next" href="#"&gt;&lt;i class="icon-chevron-up"&gt;&lt;/i&gt;&lt;/a&gt;&lt;br&gt;
            &lt;input type="text" class="input-mini" readonly&gt;&lt;br&gt;
            &lt;a class="previous" href="#"&gt;&lt;i class="icon-chevron-down"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/td&gt;
          &lt;td class="separator"&gt;:&lt;/td&gt;
          &lt;td class="minute"&gt;
            &lt;a class="next" href="#"&gt;&lt;i class="icon-chevron-up"&gt;&lt;/i&gt;&lt;/a&gt;&lt;br&gt;
            &lt;input type="text" class="input-mini" readonly&gt;&lt;br&gt;
            &lt;a class="previous" href="#"&gt;&lt;i class="icon-chevron-down"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

        </section>

      </div>
    </div>

  </div>



    <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built by <a href="http://twitter.com/vincentlamanna" target="_blank">@vincentlamanna</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Flags from <a href="http://www.gosquared.com">GoSquared</a>, licensed under <a href="assets/img/bootstrap-formhelpers-countries.flags-LICENSE.txt">GoSquared</a>.</p>
      </div>
    </footer>



    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>

    <script src="assets/js/bootstrap-formhelpers-timepicker.js"></script>

	<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</body></html>